<template>
	<div>
		<el-form label-position="left" inline label-width="auto" size="small" :model="collectClass" class="newForm">
			<el-form-item label="日期">
				<el-date-picker
					style="width: 100%"
					v-model="collectClass.F1356"
					type="date"
					placeholder="请选择日期"
					value-format="YYYY-MM-DD"
					format="YYYY-MM-DD"
					size="small"
				/>
			</el-form-item>
			<el-form-item label="执法人">
				<el-input v-model="collectClass.F1357" />
			</el-form-item>

			<el-form-item label="检查情况">
				<el-input v-model="collectClass.F1359" style="width: 100%" show-word-limit type="text" maxlength="300" />
			</el-form-item>
			<el-form-item label="处置措施">
				<el-input v-model="collectClass.F1360" style="width: 100%" show-word-limit type="text" maxlength="300" />
			</el-form-item>
			<el-form-item label="意见">
				<el-input v-model="collectClass.F1361" style="width: 100%" show-word-limit type="text" maxlength="300" />
			</el-form-item>
			<el-form-item label="备注">
				<el-input v-model="collectClass.F1362" show-word-limit style="width: 100%" type="textarea" maxlength="400" />
			</el-form-item>
			<el-form-item label="图片描述">
				<el-upload
					action="#"
					list-type="picture-card"
					:auto-upload="true"
					limit="1"
					:http-request="hUpLoad"
					:on-success="handleAvatarSuccess"
					:on-remove="handleRemove"
				>
					<el-icon><Plus /></el-icon>

					<template v-for="(item, index) in hFileList" :key="index">
						<div>
							<img class="el-upload-list__item-thumbnail" :src="item.url" alt="" />

							<span class="el-upload-list__item-actions">
								<span v-if="!disabled" class="el-upload-list__item-delete">
									<el-icon><Delete /></el-icon>
								</span>
							</span>
						</div>
					</template>
				</el-upload>
			</el-form-item>
		</el-form>
		<div style="margin: 10px 0; float: right">
			<el-button type="primary" @click="onSubmit" size="small">保存{{ dialogVisible }}</el-button>
			<el-button type="primary" plain @click="changeFormInfo('list')" size="small">取消</el-button>
		</div>
	</div>
</template>
<script>
import { reactive, defineComponent, onMounted, ref } from 'vue';
import { useStore } from '/@/store';
import mixins from './index.js';
let { hGUserInfo, hGetLoadToken, hGetToken, hCollectAdd, hGetId } = mixins();
import { ElNotification } from 'element-plus';
import { hUpdLoadImg } from '/@/api/linkoo/form';
export default defineComponent({
	emits: ['changeForm'],
	setup(props, { emit }) {
		// 新建表单
		const collectClass = reactive({
			//RecordID:'',
			F1355: '', // id
			F1356: '', // 日期
			F1357: '', // zhifaren
			F1358: '', // zhifaren ID
			F1359: '', // JIANCHA QING KUANG
			F1360: '', // CHUZHI CUOSHI
			F1361: '', // YI JIAN
			F1362: '', // BEI ZHU
			F1363: '', // TUPAIN MIAOSHU
			F1364: '', // RENWU ID
			F1599: '',
		});
		let hUploadRef = ref();
		let upLoadUrl = ref();
		const baseLoadUrl = 'http://a.linkoo.cn:94/file/add';
		const store = useStore();
		let userCollect = ref();
		let tokenCollect = ref();
		let hFileList = reactive([]);

		const onSubmit = () => {
			console.log('userCollectuserCollectuserCollect', userCollect);
			//collectClass.F1357 = userCollect.userName;
			//collectClass.F1358 = userCollect.id;
			collectClass.F1355 = hGetId(12, 31);
			console.log('采集上报collectClass', collectClass);
			hCollectAdd(tokenCollect, collectClass).then((res) => {
				console.log('======', res);
				ElNotification({
					title: '提示',
					type: 'success',
					message: '上报成功',
				});
				emit('changeForm', 'list');
			});
		};
		const changeFormInfo = (type) => {
			emit('changeForm', type);
		};
		const pushDataId = (row) => {
			console.log('传递值', row);
			collectClass.F1364 = row.F1330;
			collectClass.F1599 = row.F1117;
			collectClass.F1357 = row.F1251;
			collectClass.F1358 = row.F1250;
			collectClass.RecordID = row.RecordID;
		};

		const setDefData = () => {
			let date = new Date();
			let formatter = new Intl.DateTimeFormat('en-CA', { year: 'numeric', month: '2-digit', day: '2-digit' });
			console.log('--', formatter.format(date));
			collectClass.F1356 = formatter.format(date);
		};
		const handleRemove = (file, files) => {
			console.log(files, 'file', file);
			file = {};
		};
		const handlePictureCardPreview = (file) => {
			console.log('预览', file);
			hDialog.dialogImageUrl = file;
			hDialog.dialogVisible = true;
		};

		const hUpLoad = (params) => {
			console.log(params);

			const file = params.file;
			let json = {
				file: file,
				fileName: file.name,
				filesize: file.size,
			};
			hFileList.push({ ...json, file });
			console.log('form json:::', json);
			hUpdLoadImg(json).then((resp) => {
				console.log('resp=====', resp);
				collectClass.F1363 = resp.data.files || file.name;
			});
		};
		const handleAvatarSuccess = (response, uploadFile) => {
			console.log('response,uploadFile', response, uploadFile);
		};
		const beforeAvatarUpload = (response, uploadFile) => {
			console.log('response,uploadFile', response, uploadFile);
		};

		onMounted(() => {
			hGetLoadToken(store);
			userCollect = hGUserInfo();
			tokenCollect = hGetToken();
			setDefData();
			upLoadUrl = baseLoadUrl + '?token=' + hGetToken();
			console.log('upLoadUrl::', upLoadUrl);
		});

		return {
			collectClass,
			onSubmit,
			changeFormInfo,
			userCollect,
			pushDataId,
			handleAvatarSuccess,
			upLoadUrl,
			hUpLoad,
			handleRemove,
		};
	},
});
</script>
<style >
.newForm {
	width: 95%;
	margin: 10px auto;
}

.el-upload {
	width: 100px;
	height: 100px;
	font-size: 16px !important;
}

.el-upload-list {
	display: flex;
}

.el-upload-list--picture-card .el-upload-list__item {
	width: 100px;
	height: 100px;
}
.el-icon--zoom-in {
	display: none;
}
</style>
